<!--  -->
<template>
  <div>
    <cu-custom
      :bgImage="bgImage"
      :needBack="true"
      bgColor="bgNormal"
      :topTitle="targetManagement.target"
      titleClass="commTitleWhite"
      backIconColor="#fff"
    ></cu-custom>
    <view class="content" :style="{ height: scorllContentHeight }">
      <view class="tips">
        <view class="">
          <image class="" src="@/static/images/workbench/declare.png"> </image>
          <text class="">
            评分依据：{{ targetManagement.comment || "暂无" }}
          </text>
        </view>
        <view class="">
          <image class="" src="@/static/images/workbench/backUpData.png">
          </image>
          <text class="">
            备查资料：{{ targetManagement.backUpData || "暂无" }}
          </text>
        </view>
      </view>
      <view class="reference_paper">
        <view class="reference_paper_title"> 参考文件 </view>
        <view class="reference_paper_documents">
          <text class=""> 填报文件 </text>
          <view class="">
            <view
              class=""
              style="display: flex; align-items: center"
              v-show="
                targetManagement &&
                targetManagement.files &&
                targetManagement.files.length
              "
              v-for="(file, index) in targetManagement.files"
              :key="index"
            >
              <image
                v-if="file.type === 'doc' || file.type === 'docx'"
                class="word"
                src="@/static/images/workbench/word.png"
              >
              </image>
              <image
                v-else
                style="margin-left: 61rpx; margin-right: 8rpx"
                class="pdf"
                src="@/static/images/workbench/pdf.png"
              >
              </image>
              <text class="required" @click="previewFile(file)"
                >{{ file.original }}
              </text>
              <!-- <image class="tp" src="@/static/images/workbench/tp.png"> </image
          ><image class="" src="@/static/images/workbench/pdf.png"> </image> -->
            </view>
          </view>
        </view>
        <view class="reference_paper_photos">
          <view
            class="pic_delete"
            v-if="imgList.length"
            v-for="(item, index) in imgList"
            :key="index"
          >
            <image class="pic" :src="getImgUrl(item)" @click="previewImage"> </image>
            <image
              class="delete"
              src="@/static/images/workbench/delete.png"
              @click="handleDelete(index)"
            >
            </image>
          </view>
          <view class="photo" v-if="imgList.length < 5" @click="takePhoto">
            <image
              class="camera"
              src="@/static/images/workbench/camera.png"
            >
            </image>
          </view>
        </view>
        <view
          class=""
          style="color: #666; margin-top: 40rpx"
          v-if="concatFile.original"
        >
          <text>合并后文件</text>
          <text
            style="margin-left: 30rpx; margin-right: 30rpx"
            @click="previewFile(concatFile)"
            >{{ concatFile.original }}</text
          ><u-icon name="close" size="20" @click="deleteFile"></u-icon>
        </view>
      </view>
      <view class="">
        <u-form
          :model="form"
          ref="uForm"
          id="uForm"
          label-width="230"
          :label-style="{
            color: '#666',
          }"
          :border-bottom="false"
        >
          <view class="form-item">
            <u-form-item
              label-width="300"
              :label="
                '自评得分' + '(总分：' + targetManagement.totalPoint + ')'
              "
              prop="selfScore"
              :border-bottom="false"
            >
              <!-- maxlength="3" -->
              <u-input
                :disabled="status !== 2 ? true : false"
                type="number"
                v-model="form.selfScore"
                placeholder="请输入"
                placeholder-style="color:#e0e0e0"
              />
            </u-form-item>
          </view>

          <view class="form-item text_area">
            <u-form-item
              label="备注说明"
              prop="comment"
              :border-bottom="false"
              label-position="top"
            >
              <u-input
                v-model="form.comment"
                placeholder="请输入"
                :disabled="status !== 2 ? true : false"
                type="textarea"
                height="160"
                placeholder-style="color:#e0e0e0"
              />
            </u-form-item>
          </view>
        </u-form>
      </view>
      <view class="opinion">
        <view class="opinion_title"> 指导意见 </view>
        <view class="collapse">
          <view class="collapse_container">
            <!-- <text class="title">{{ targetManagement.target }}</text> -->
            <!-- <view class="" @click="showItem = !showItem">
              <text class="" style="margin-right: 5rpx">
                {{ showItem ? "收起" : "展开" }}
              </text>
              <image class="bottom" src="@/static/images/bottom.png"> </image>
              <u-icon name="arrow-up" v-if="showItem"></u-icon>
              <u-icon name="arrow-down" v-else></u-icon>
            </view> -->
          </view>
          <!-- v-show="showItem" -->
          <view class="time_line">
            <u-time-line>
              <u-time-line-item v-for="(item, index) in list" :key="index">
                <!-- 此处没有自定义左边的内容，会默认显示一个点 -->
                <template v-slot:content>
                  <view>
                    <view class="first"
                      >{{ item.type == null ? "社会组织" : "指导专家" }}
                      {{ item.createTime }}</view
                    >
                    <view class="second">{{ item.content }}</view>
                    <!-- <view class="third">{{ item.name }}</view>
                    <view class="fourth">{{ item.name1 }}</view> -->
                  </view>
                </template>
              </u-time-line-item>
            </u-time-line>
          </view>
        </view>
      </view>
    </view>
    <view class="fix_btn" v-if="status == 2">
      <button @click="handleCancle" hover-class="none">取消</button>
      <button @click="confirm" hover-class="none">确定</button>
    </view>
  </div>
</template>

<script>
import {
  getTargetDeclarationRecordDetail,
  writeTargetDeclaration,
  editTargetDeclaration,
  getTargetDeclarationRecord,
  getFiles,
  getConcatFile,
} from "@/api/workBench";
import baseUrl from "@/api/baseUrl.js";
import { getFileUrl } from "@/utils/common";
export default {
  data() {
    return {
      showItem: false,
      list: [],
      scorllContentHeight: "",
      form: {
        selfScore: "", // 自评得分
        comment: "", // 备注说明
      },
      imgList: [],
      id: "", // 指标id
      targetDeclarationRecordId: "", // 填报id
      file: {},
      targetManagement: {}, // 说明 被查资料 参考文件
      concatFile: {},
      fileListBefore: [],
      status: "",
    };
  },
  onLoad(options) {
    // console.log(options);
    this.id = options.id;
    this.targetDeclarationRecordId = options.targetDeclarationRecordId;
    this.getTargetDeclarationRecord();
    this.getDetail();
    this.getFiles();
    this.getConcatFile();
  },
  onShow() {
    this.getHeight();
    this.status = uni.getStorageSync("status");
  },
  methods: {
    // 根据指标Id查询指标详情(指标名称 说明 被查资料 参考文件)
    getTargetDeclarationRecord() {
      getTargetDeclarationRecord(this.id).then((res) => {
        if (res.code == 200) {
          this.targetManagement = res.data;
          console.log(this.targetManagement);
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
          });
        }
      });
    },
    // 查询指标填报详情(自评得分 备注说明 回复列表)
    getDetail() {
      if (this.targetDeclarationRecordId !== "null") {
        getTargetDeclarationRecordDetail(this.targetDeclarationRecordId).then(
          (res) => {
            console.log(res);
            if (res.code == 200) {
              this.list = res.data.replyList || [];
              this.form.selfScore = res.data.selfScore || "";
              this.form.comment = res.data.comment || "";
              this.file = res.data.file;
            } else {
              uni.showToast({
                title: res.msg,
                icon: "none",
              });
            }
          }
        );
      }
    },
    getFiles() {
      if (this.targetDeclarationRecordId !== "null") {
        getFiles(this.targetDeclarationRecordId).then((res) => {
          if (res.code == 200) {
            this.fileListBefore = res.data || [];
            // console.log(this.imgList);
          } else {
            uni.showToast({
              title: res.msg,
              icon: "none",
            });
          }
        });
      }
    },
    getConcatFile() {
      if (this.targetDeclarationRecordId !== "null") {
        getConcatFile(this.targetDeclarationRecordId).then((res) => {
          if (res.code == 200) {
            this.concatFile = res.data || {};
            // console.log(this.imgList);
          } else {
            uni.showToast({
              title: res.msg,
              icon: "none",
            });
          }
        });
      }
    },
    getHeight() {
			this.scorllContentHeight = `calc(100vh - ${this.CustomBar}px - 135rpx)`;
      // if (this.status != 2) {
      //   this.scorllContentHeight = `calc(100vh - ${this.CustomBar}px)`;
      // } else {
      //   this.scorllContentHeight = `calc(100vh - ${this.CustomBar}px - 135rpx)`;
      // }
    },
    // 拍照
    takePhoto() {
      const token = uni.getStorageSync("access_token");
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
        success: (res) => {
          uni.showLoading({
            title: "上传中",
          });
          const tempFilePath = res.tempFilePaths[0];
          uni.uploadFile({
            header: {
              Authorization: "Bearer " + token,
            },
            url: baseUrl + "/minio/uploadFile", //仅为示例，非真实的接口地址
            filePath: tempFilePath,
            name: "file",
            success: (res) => {
              let data = JSON.parse(res.data);
              if (data.code == 200) {
                // console.log(data);
                this.imgList.push(data.data);
                uni.hideLoading();
              } else {
                uni.showToast({
                  title: data.msg,
                  icon: "none",
                  duration: 2000,
                });
                uni.hideLoading();
              }
            },
          });
        },
      });
    },
		getImgUrl(item) {
			return getFileUrl(item)
		},
    // 预览图片
    previewImage(current = 0) {
      const arr = [];
      this.imgList.forEach((item) => {
        arr.push(getFileUrl(item));
      });
      uni.previewImage({
        current,
        urls: arr,
      });
    },
    // 删除图片
    handleDelete(index) {
      this.imgList.splice(index, 1);
    },
    // 取消
    handleCancle() {
      uni.navigateBack({ delta: 1 });
    },
    // 确定
    confirm() {
      if (!this.form.selfScore) {
        uni.showToast({ title: "自评得分不可为空", icon: "none" });
      } else if (
        Number(this.form.selfScore) > Number(this.targetManagement.totalPoint)
      ) {
        uni.showToast({ title: "自评得分不可高于总分", icon: "none" });
      } else if (!this.imgList.length && !this.concatFile.url) {
        uni.showToast({ title: "请上传文件", icon: "none" });
      } else {
        if (this.targetDeclarationRecordId !== "null") {
          let files;
          if (Object.keys(this.concatFile).length && this.imgList.length) {
            files = this.imgList.concat(this.fileListBefore);
          } else if (
            !Object.keys(this.concatFile).length &&
            this.imgList.length
          ) {
            files = this.imgList;
          } else if (
            Object.keys(this.concatFile).length &&
            !this.imgList.length
          ) {
            files = this.fileListBefore;
          }
          editTargetDeclaration({
            id: this.targetDeclarationRecordId,
            targetManagementId: this.id,
            declarationInfoId: uni.getStorageSync("declarationInfoId"),
            ...this.form,
            files,
            // files: this.imgList.concat(
            //   Object.keys(this.concatFile).length ? this.concatFile : [],
            //   this.fileListBefore
            // ),
          }).then((res) => {
            // console.log("res");
            // console.log(Object.keys(this.concatFile).length);
            if (res.code == 200) {
              uni.showToast({
                title: "修改成功",
                icon: "none",
              });
              setTimeout(() => {
                uni.navigateBack({
                  delta: 1,
                });
              }, 1000);
            } else {
              uni.showToast({
                title: res.msg,
                icon: "none",
              });
            }
          });
        } else {
          writeTargetDeclaration({
            targetManagementId: this.id,
            declarationInfoId: uni.getStorageSync("declarationInfoId"),
            ...this.form,
            files: this.imgList,
          }).then((res) => {
            console.log("res===", res);
            if (res.code == 200) {
              uni.showToast({
                title: "填写成功",
                icon: "none",
              });
              setTimeout(() => {
                uni.navigateBack({
                  delta: 1,
                });
              }, 1000);
            } else {
              uni.showToast({
                title: res.msg,
                icon: "none",
              });
            }
          });
        }
      }
    },
    previewFile(file) {
      // console.log("preview");
			let fileUrl = getFileUrl(file) 
      uni.showLoading({
        mask: true,
        title: "文件预览中",
      });
      uni.downloadFile({
        url: fileUrl, //文件地址
        success: function (res) {
          var filePath = res.tempFilePath;
          console.log(res);
          uni.openDocument({
            filePath: filePath,
            fileType: file.type === "pdf" ? "pdf" : "docx",
            showMenu: false, //这个参数可设置你预览的文件能否被直接转发，此次是设置是否展示分享菜单
            success: function (res) {
              // console.log("res==",res)
              uni.hideLoading();
            },
            fail: function (err) {
              // console.log("err==",err)
              uni.showToast({
                title: "预览文件出错,请稍后尝试",
                icon: "none",
              });
              uni.hideLoading();
            },
          });
        },
        fail: function (err) {
          console.log(err);
          uni.hideLoading();
        },
      });
    },
    deleteFile() {
      this.concatFile = {};
    },
  },
};
</script>
<style lang='scss' scoped>
.content {
  overflow-y: scroll;
  color: #333;
  font-size: 28rpx;
  .tips {
    background: #fff;
    padding: 23rpx 29rpx;
    view {
      padding: 34rpx 0 38rpx 40rpx;
      display: flex;
      align-items: center;
      border-radius: 12rpx;
      &:first-child {
        background: #edf3ff;
      }
      &:last-child {
        background: #fff9eb;
      }
      image {
        min-width: 38rpx;
        max-width: 38rpx;
        width: 38rpx;
        height: 38rpx;
        margin-right: 19rpx;
      }
    }
    view:last-child {
      margin-top: 19rpx;
    }
  }
  .reference_paper {
    margin: 19rpx 0 21rpx;
    padding: 27rpx 0 33rpx 36rpx;
    background: #fff;
    .reference_paper_documents {
      margin-top: 48rpx;
      display: flex;
      // align-items: center;
      text:first-child {
        color: #666;
      }
      text:last-child {
        font-size: 26rpx;
        margin-left: 9rpx;
      }
      .word {
        margin-left: 61rpx;
        margin-right: 8rpx;
      }
      .required {
        font-weight: 500;
      }
      .tp {
        margin-left: 47rpx;
        margin-right: 8rpx;
      }
      image {
        width: 30rpx;
        height: 30rpx;
      }
    }
    .reference_paper_photos {
      display: flex;
      flex-wrap: wrap;
      margin-top: 30rpx;
      padding-left: 172rpx;
      .pic_delete {
        position: relative;
        margin-right: 30rpx;
        .pic {
          width: 150rpx;
          height: 150rpx;
          border-radius: 4rpx;
        }
        .delete {
          position: absolute;
          top: -17rpx;
          right: -17rpx;
          width: 34rpx;
          height: 34rpx;
        }
      }
      .photo {
        padding: 50rpx 48rpx 50rpx 48rpx;
        background: #edf3ff;
        .camera {
          width: 55rpx;
          height: 41rpx;
          border-radius: 4rpx;
        }
      }
    }
  }
  .form-item {
    padding: 0 0 0 34rpx;
    background: #fff;
    margin-top: 20rpx;
  }
  .text_area {
    ::v-deep {
      .u-input {
        padding-right: 29rpx !important;
        text-align: left !important;
      }
    }
  }
  ::v-deep {
    .u-input {
      padding-right: 29rpx !important;
      text-align: right;
    }
    .u-dot {
      background: none;
      border: 3rpx solid #5984fb;
      height: 20rpx;
      width: 20rpx;
    }
    .u-time-axis::before {
      border-left-color: #5984fb;
      border-radius: 1rpx;
    }
  }
  .opinion {
    padding: 44rpx 36rpx 0 33rpx;
    background: #fff;
    margin-top: 22rpx;
    .collapse {
      color: #666;
      padding: 30rpx 0;
      .title {
        color: #666;
        font-size: 26rpx;
      }
      .collapse_container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 26rpx;

        font-size: 24rpx;
        color: #4477f8;
        display: flex;
        align-items: center;
        image {
          width: 26rpx;
          height: 16rpx;
          margin-left: 11rpx;
        }
      }
      .time_line {
        margin-left: 40rpx;
        .first {
          font-size: 26rpx;
          color: #4d70f8;
        }
        .second {
          font-size: 28rpx;
          color: #999;
          margin: 10rpx 0;
        }
        .third {
          font-size: 26rpx;
          color: #4d70f8;
          margin-bottom: 22rpx;
          color: #fea538;
        }
        .fourth {
          font-size: 28rpx;
          color: #999;
        }
      }
    }
  }
}
.fix_btn {
  box-shadow: 0rpx 2rpx 15rpx 0rpx rgba(163, 163, 163, 0.35);
  background: #fff;
  height: 135rpx;
  padding: 28rpx;
  position: fixed;
  bottom: 0;
  width: 100vw;
  display: flex;
	z-index: 10;
  button {
    width: 310rpx;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 32rpx;
    border-radius: 40rpx;
    background: #fff;
    border: 1rpx solid #4d70f8;
    color: #4d70f8;
    &:last-child {
      background: linear-gradient(90deg, #417ffc, #505eeb);
      box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(22, 121, 253, 0.28);
      color: #fff;
    }
  }
}
</style>